<template>
  <div>
    <div class="flex-start m-b-30">
      <el-button icon="el-icon-back" type="primary" plain round size="small" @click="back">返回</el-button>
    </div>
    <div class="flex-start">
      <key-value>
        <template #key>车牌号</template>
        <template #value>{{ detail.carNo }}</template>
      </key-value>
      <key-value>
        <template #key>VIN码</template>
        <template #value>{{ detail.vinCode }}</template>
      </key-value>
      <key-value>
        <template #key>所属集群</template>
        <template #value>{{ detail.clusterName | defaultValue }}</template>
      </key-value>
    </div>
    <div class="flex-start">
      <key-value>
        <template #key>生产日期</template>
        <template #value>{{ detail.productTime | defaultValue }}</template>
      </key-value>
      <key-value>
        <template #key>车龄</template>
        <template #value>{{ detail.carAge }}年</template>
      </key-value>
      <key-value>
        <template #key>司机姓名</template>
        <template #value>{{ detail.userName | defaultValue }}</template>
      </key-value>
    </div>
    <div class="flex-start">
      <key-value>
        <template #key>液罐容量(吨)</template>
        <template #value>{{ detail.capacity | kg2Tons }}</template>
      </key-value>
    </div>
    <div class="flex-start m-t-20">
      <key-value>
        <template #key>加注站定位</template>
        <template #value>
          <div class="flex-center">
            <span>经度：{{ detail.carLng }}</span><span class="m-l-10">纬度：{{ detail.carLat }}</span>
            <el-button size="mini" type="primary" class="m-l-10 btn" @click="showLocationFlag = true">查看位置</el-button>
          </div>
        </template>
      </key-value>
    </div>
    <div class="flex-start">
      <key-value>
        <template #key>地址</template>
        <template #value>{{ addressRegion }}</template>
      </key-value>
    </div>
    <div class="flex-start">
      <key-value>
        <template #key>详细地址</template>
        <template #value>{{ detail.address | defaultValue }}</template>
      </key-value>
    </div>
    <div class="flex-start m-t-20 flex-align-items-unset">
      <key-value only-key>
        <template #key>行驶证照片</template>
      </key-value>
      <div class="flex-start f-g-1">
        <el-image class="m-l-20" style="width: 130px; height: 130px" v-for="(item,index) in imgs"
                  :src="item.link"
                  :preview-src-list="[item.link]"/>
      </div>
    </div>
    <div class="h-300px"></div>

    <!-- 地图手动定位 -->
    <el-dialog title="选择位置" append-to-body :visible.sync="showLocationFlag" width="1000px">
      <map-select-location-content v-if="showLocationFlag" readonly
                                   :init-location="[detail.carLng,detail.carLat]"
                                   @hide="showLocationFlag = false"/>
    </el-dialog>
  </div>
</template>

<script>
import KeyValue from "@/components/basic-block/key-value";
import MapSelectLocationContent from "@/components/business/map-select-location-content";
import AppAddress from "@/components/business/app-address";
import {getRefImgs} from "@/api/business/attachment-file";
import {getRecords, getRespData} from "@/util/common-util";
import {getRegionDetail} from "@/api/business/region";

export default {
  name: "rehydration-vehicle-detail-content",
  components: {AppAddress, MapSelectLocationContent, KeyValue},
  props: ['detail'],
  data() {
    return {
      showLocationFlag: false,
      addressRegion: '',
      imgs: []
    }
  },
  created() {
    this.loadImg()
    this.loadAddress()
  },
  methods: {
    loadAddress() {
      getRegionDetail(this.detail.districtCode).then(res => {
        const data = getRespData(res)
        this.addressRegion = data.provinceName + data.cityName + data.districtName
      })
    },
    loadImg() {
      getRefImgs(this.detail.id, 0).then(res => {
        this.imgs = getRecords(res)
      })
    },
    back() {
      this.$emit('back')
    },
    cancel() {
      this.back()
    },
    getAddress() {
      return {province: this.detail.provinceCode, city: this.detail.cityCode, area: this.detail.districtCode}
    }
  }
}
</script>

<style scoped>

.btn {
  height: 20px;
  font-size: 12px !important;
  line-height: 6px;
}

</style>
